<template>
  <ag-popup
    v-model="controlHeight_visible"
    :title="ifEdit ? '编辑图层' : '添加图层'"
    class="service-info-config"
    @onCancel="handleCancel"
  >
    <div>
      <label>图层名称</label>
      <el-select 
        size="small" 
        class="select-layer"
        placeholder="请选择图层名称"
        v-model="layerSelect"
        @change="handleChange"
      >
        <el-option 
          v-for="item in layerTreeList" 
          :key="item.id"
          :value="item.id"
          :label="item.nameCn"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <label>弹框名称</label>
      <el-select size="small" 
        class="select-layer"
        placeholder="请选择弹框名称"
        v-model="dataForm.popup_type"
        @change="handleChange1"
      >
        <el-option v-for="(item, index) in popupList" 
          :key="item.value"
          :value="item.value"
          :label="item.label"
          >
          <span v-if="index > 0">{{ item.label }}</span>
        </el-option>
      </el-select>
    </div>
    <div class="button-group">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button size="small" type="primary" @click="dataFormSubmit">确定</el-button>
    </div>
  </ag-popup>
</template>

<script>
import AgPopup from "@/views/components/precut/AgPopup";
import popupList from "./config.json"
export default {
  components: {
    AgPopup,
  },
  data() {
    return {
      dataForm: {
        layer_id: "",
        name: "",
        popup_type: "",
      }, //form表单
      layerSelect:'',
      controlHeight_visible: false, //是否显示此弹出框
      ifEdit: false,
      layerTreeList: CIM.layerTree._layerTreeData, //图层树的列表
      popupList: popupList, //弹框的列表
    };
  },
  methods: {
    // 初始化表单数据
    init(_editItem) {
      this.dataForm = {
        id:'',
        name: "",
        layer_id: "",
        popup_type: "",
        state:1,
      };
      this.ifEdit = false;
      if (_editItem) {
        this.ifEdit = true;
        this.layerSelect = _editItem.layer_id;
        this.dataForm = Object.assign(this.dataForm, {
          id: _editItem.id,
          layer_id: _editItem.layer_id,
          name: _editItem.name,
          popup_type: _editItem.popup_type,
          state:_editItem.state,
        });
      }
      this.controlHeight_visible = true;
    },
    // 提交表单
    dataFormSubmit() {
      if (!this.ifEdit) {
        this.dataForm.id = Cesium.createGuid();
        this.$emit("addSupportLayers",this.dataForm);
      } else {
        this.$emit("editSupportLayers",this.dataForm);
      }

      this.controlHeight_visible = false;
    },
    //关闭弹框
    handleCancel() {
      this.controlHeight_visible = false;
    },
    //处理第二个下拉列表的变化
    handleChange(value) {
      let item=this.layerTreeList[value];
      if(item){
        this.dataForm.layer_id = item.id;
        this.dataForm.name = item.nameCn;
      }
    },
    //处理第二个下拉列表的变化
    handleChange1(value) {
      this.dataForm.popup_type = value;
    },
  },
};
</script>
<style scoped>
.service-info-config {
  width: 150px;
  height: 320px;
}
.service-info-config /deep/ .ag-pop-box-body {
  padding: 10px !important;
}
.button-group {
  margin-top: 10px;
  text-align: right;
}
.button-group .ant-btn {
  margin: 10px;
}
.select-layer {
  width: 100%;
}
</style>
